<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<%@ taglib prefix="c" uri="/WEB-INF/tld/c.tld" %>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>FancyBox 1.3.4 | Demonstration</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
		!window.jQuery && document.write('<script src="${base}/jquery.fancybox-1.3.4/jquery-1.4.3.min.js"><\/script>');
	</script>
	<script type="text/javascript" src="${base}/jquery.fancybox-1.3.4/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="${base}/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="${base}/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 	<link rel="stylesheet" href="${base}/jquery.fancybox-1.3.4/style.css" />
 	<style type="text/css">
 		#float {
 			float: left;
 		}
 		
 		#margin {
 			magin: 10px 20px 10px 20px;
 		}
 	</style>
	<script type="text/javascript">
	
	$(document).ready(function() {
	$("a[rel=example_group]").fancybox({
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		'titlePosition' 	: 'over',
		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});
});
	
	</script>
	<div id="margin"  width="100%" layoutH="138" id="typelist">
	<c:forEach var="item" items="${obj.list }">
	<div id=float>
		<a rel="example_group" href="${item.url }" title="photo"><img alt="" src="${item.url } " height="60" width="60"/></a>
	</div>
	</c:forEach>
	</div>	
